<template>
    <div>
       <van-search show-action placeholder="请输入搜索关键词">
         <template #action>
           <div>搜索</div>
         </template>
       </van-search>
       <div class="bnner">
       <div>
       <van-sidebar v-model="activeKey">
           <van-sidebar-item v-for="value in data"
            :key="value.id"
            :title="value.recipesTypeName"
            @click='eid=value.id'
            />
         </van-sidebar>
         </div>
         <div>
         <fica-tion :item='item'></fica-tion>
         
         </div>
        </div> 
    </div>
</template>

<script>
import FicaTion from '@/components/FicaTion.vue'
import PageDish from '@/components/PageDish.vue'
    export default {
  components: { FicaTion },
        data() {
            return {
               activeKey:0 ,
               data:'',
               eid: 0,
               item:'',
            }
        },
        methods: {
          //获取商品分类
          Fication() {
            let url = '/recipesType/findAll'
            this.axios.get(url).then((res) => {
             // console.log(res)
              this.data = res.data.data
            })
          },
          //得到分类id
          Ficationitem(){
           console.log(this.eid)
          }
        },
        mounted () {
          this.Fication()
          let url ='/recipes/findRecipesByTypeId/' + 1+'/'+JSON.parse(sessionStorage.getItem('user')).id
          this.axios.get(url).then((res) => {
            console.log(res.data.data)
            this.item = res.data.data
          })
        },
       watch:{
        'eid':function(newVal,oldVal){
          console.log(newVal)
          let url ='/recipes/findRecipesByTypeId/' + newVal+'/'+JSON.parse(sessionStorage.getItem('user')).id
          this.axios.get(url).then((res) => {
            console.log(res.data.data)
             this.item = res.data.data
          })
        }
       }
    }
</script>

<style lang="scss" scoped>
.bnner{
    display: flex;
}

</style>